<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="账单汇总" name="first">
        <el-tabs v-model="listName" @tab-click="handClick">
          <el-tab-pane label="网点" name="first">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form ref="wdform" :model="wdform" label-width="100px" class="flex-start">
                    <el-form-item label="汇总维度" prop="collectType">
                      <el-select v-model="wdform.collectType" placeholder="请选择汇总维度" style="width: 286px" @change="handleDimensionalityChange">
                        <el-option label="月汇总" :value="2" />
                        <el-option label="日汇总" :value="1" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="下账时间">
                      <el-date-picker v-show="wdform.collectType == 2" v-model="month" value-format="yyyy-MM" type="monthrange" placeholder="选择月" range-separator="至" style="width: 672px" start-placeholder="开始月份" end-placeholder="结束月份" @change="wdmonthChange" />

                      <el-date-picker v-show="wdform.collectType == 1" v-model="Time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 672px" @change="wddateChange" />
                    </el-form-item>
                    <el-form-item label="渠道分类" prop="channelType">
                      <el-select v-model="wdform.channelType" placeholder="请选择渠道分类" style="width: 286px">
                        <el-option label="自有渠道" value="自有渠道" />
                        <el-option label="三方渠道" value="三方渠道" />
                        <el-option label="小件员渠道" value="小件员渠道" />
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getWdTableList">查询</el-button>
                      <el-button @click="wdClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="订单来源" prop="orderSourceId">
                      <el-select v-model="wdform.orderSourceId" placeholder="请选择订单来源" style="width: 286px">
                        <el-option v-for="item in OrderSourceList" :key="item.id" :label="item.orderSource" :value="item.id" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select v-model="wdform.networkNameId" placeholder="请选择所属网点" style="width: 286px">
                        <el-option v-for="item in networkList" :key="item.id" :label="item.networkName" :value="item.networkName" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div>
                  <elltable :loading="wdloading" :data="wdTableData" :th="wdth" />
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="业务员" name="second">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form ref="ywyform" :model="ywyform" label-width="110px" class="flex-start">
                    <el-form-item label="汇总维度" prop="collectType">
                      <el-select v-model="ywyform.collectType" placeholder="请选择汇总维度" style="width: 286px" @change="handleDimensionalityChange">
                        <el-option label="月汇总" :value="2" />
                        <el-option label="日汇总" :value="1" />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="下账时间" label-width="120px">
                      <el-date-picker v-show="ywyform.collectType == 2" v-model="month" type="monthrange" value-format="yyyy-MM" placeholder="选择月" range-separator="至" style="width: 680px" start-placeholder="开始月份" end-placeholder="结束月份" @change="ywymonthChange" />

                      <el-date-picker v-show="ywyform.collectType == 1" v-model="Time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 680px" @change="ywydateChange" />

                      <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item label="渠道分类" prop="channelType">
                      <el-select v-model="ywyform.channelType" placeholder="请选择渠道分类" style="width: 286px">
                        <el-option label="自有渠道" value="自有渠道" />
                        <el-option label="三方渠道" value="三方渠道" />
                        <el-option label="小件员渠道" value="小件员渠道" />
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="getYwyTableList">查询</el-button>
                      <el-button @click="ywyClear">重置</el-button>
                    </el-form-item>
                    <el-form-item label="订单来源" prop="orderSourceId">
                      <el-select v-model="ywyform.orderSourceId" placeholder="请选择订单来源" style="width: 286px">
                        <el-option v-for="item in OrderSourceList" :key="item.id" :label="item.orderSource" :value="item.id" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="业务员名称" style="margin-left: 10px;" prop="salesmanName">
                      <el-input v-model="ywyform.salesmanName" placeholder="请输入业务员名称" style="width:286px" />
                    </el-form-item>
                    <el-form-item label="所属网点" prop="networkNameId">
                      <el-select v-model="ywyform.networkNameId" placeholder="请选择所属网点" style="width: 286px">
                        <el-option v-for="item in networkList" :key="item.id" :label="item.networkName" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div>
                  <elltable :loading="ywyloading" :data="ywyTableData" :th="ywyth" />
                </div>
              </el-col>
              <div class="block" style="display: flex; justify-content: flex-end">
                <pagination :current-page="ywyform.pageDate.pageNum" :page-size="ywyform.pageDate.pageSize" :total="ywytotal" @size-change="ywyhandleSizeChange" @current-change="ywyhandleCurrentChange" />
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="账单明细" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form ref="mxform" :model="mxform" label-width="100px" class="flex-start">
                <el-form-item label="汇总维度" prop="collectType">
                  <el-select v-model="mxform.collectType" placeholder="请选择汇总维度" style="width: 286px" @change="handleDimensionalityChange">
                    <el-option label="月汇总" :value="2" />
                    <el-option label="日汇总" :value="1" />
                  </el-select>
                </el-form-item>

                <el-form-item label="下账时间">
                  <el-date-picker v-show="mxform.collectType == 2" v-model="month" value-format="yyyy-MM" type="monthrange" placeholder="选择月" range-separator="至" style="width: 672px" start-placeholder="开始月份" end-placeholder="结束月份" @change="mxmonthChange" />

                  <el-date-picker v-show="mxform.collectType == 1" v-model="Time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 672px" @change="mxdateChange" />
                </el-form-item>
                <el-form-item label="渠道分类" prop="channelType">
                  <el-select v-model="mxform.channelType" placeholder="请选择渠道分类" style="width: 286px">
                    <el-option label="自有渠道" value="自有渠道" />
                    <el-option label="三方渠道" value="三方渠道" />
                    <el-option label="小件员渠道" value="小件员渠道" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="mxSearch">查询</el-button>
                  <el-button @click="mxClear">重置</el-button>
                </el-form-item>
                <el-form-item label="订单来源" prop="orderSourceId">
                  <el-select v-model="mxform.orderSourceId" placeholder="请选择订单来源" style="width: 286px">
                    <el-option v-for="item in OrderSourceList" :key="item.id" :label="item.orderSource" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务员名称" prop="salesmanName">
                  <el-input v-model="mxform.salesmanName" placeholder="请选择业务员名称" style="width: 286px" />
                </el-form-item>
                <el-form-item label="所属网点" prop="networkNameId">
                  <el-select v-model="mxform.networkNameId" placeholder="请选择所属网点" style="width: 286px">
                    <el-option v-for="item in networkList" :key="item.id" :label="item.networkName" :value="item.networkName" />
                  </el-select>
                </el-form-item>

                <el-form-item label="上级网点" prop="parentNetworkName">
                  <el-select v-model="mxform.parentNetworkName" disabled placeholder="请选择上级网点" style="width: 286px">
                    <el-option label="应收下级" value="应收下级" />
                    <el-option label="应付下级" value="应付下级" />
                  </el-select>
                </el-form-item>

                <el-form-item label="运单号" prop="transportCode">
                  <el-input v-model="mxform.transportCode" placeholder="请输入运单号" style="width: 286px" />
                </el-form-item>
                <el-form-item label="订单号" prop="orderCode">
                  <el-input v-model="mxform.orderCode" placeholder="请输入订单号" style="width: 286px" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable ref="multipleTable" :loading="mxloading" :data="mxTableData" :th="mxth" :n="3" />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination :current-page="mxform.pageDate.pageNum" :page-size="mxform.pageDate.pageSize" :total="mxtotal" @size-change="mxhandleSizeChange" @current-change="mxhandleCurrentChange" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getOutletsList,
  // collectBillList,
  collectBillSearch,
  getOrderSourceList,
  billCollectSearch,
  salesmanSearch
} from '@/api/dashboard'

export default {
  data() {
    return {
      // 网点表头
      wdth: [],
      // 业务员表头
      ywyth: [],
      // 明细表头
      mxth: [],
      mxloading: false,
      ywyloading: false,
      wdloading: false,
      activeName: 'first',
      listName: 'first',
      show: 1,
      // 网点列表
      networkList: [],
      // 月份
      month: [],
      value1: '',
      // 明细form
      mxform: {
        collectType: 1,
        startTime: '',
        endTime: '',
        startMonth: '',
        endMonth: '',
        channelType: '',
        networkNameId: '',
        orderSourceId: '',
        salesmanName: '',
        parentNetworkName: '',
        transportCode: '',
        orderCode: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      wdform: {
        collectType: 1,
        startTime: '',
        endTime: '',
        startMonth: '',
        endMonth: '',
        channelType: '',
        networkNameId: '',
        orderSourceId: ''
      },
      ywyform: {
        collectType: 1,
        startTime: '',
        endTime: '',
        startMonth: '',
        endMonth: '',
        channelType: '',
        networkNameId: '',
        orderSourceId: '',
        salesmanName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }

      },
      ywytotalpages: {
        pageNum: 1,
        pageSize: 10
      },
      Time: [],
      // 订单来源
      OrderSourceList: [],
      pages: {
        pageNum: 1,
        pageSize: 10
      },
      // 明细表格
      mxTableData: [],
      total: 0,
      mxtotal: 0,
      mxpages: {
        pageNum: 1,
        pageSize: 1
      },
      // 网点表格
      wdTableData: [],
      wdtotal: 0,
      wdpages: {
        pageNum: 1,
        pageSize: 10
      },

      // 业务员表格
      ywyTableData: [],
      ywytotal: 0

    }
  },
  created() {
    this.getOutLet()
    this.getOrderSource()
  },
  mounted() {
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },

    // 获取订单来源
    getOrderSource() {
      getOrderSourceList().then((res) => {
        if (res.code === 200) {
          this.OrderSourceList = res.data
        }
      })
    },

    // 获取网点表格数据
    getWdTableList() {
      if (this.wdform.startMonth === '' && this.wdform.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.wdloading = true
      this.wdTableData = []

      billCollectSearch(this.wdform).then((res) => {
        this.wdloading = false
        if (res.code === 200) {
          this.wdTableData.push(res.data.list)
          this.wdth = res.data.fields
        } else {
          this.wdTableData = []
        }
      })
    },
    // 获取业务员表格数据
    getYwyTableList() {
      if (this.ywyform.startMonth === '' && this.ywyform.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.ywyloading = true
      salesmanSearch(this.ywyform).then((res) => {
        this.ywyloading = false

        if (res.code === 200) {
          this.ywyTableData = res.data.list.data
          this.ywytotal = res.data.list.total
          this.ywyth = res.data.fields
        } else {
          this.ywyTableData = []
          this.ywytotal = 0
        }
      })
    },
    // 根据月.日切换时间选择
    handleDimensionalityChange(newVal) {
      this.Time = []
      this.month = []
      this.mxform.startMonth = ''
      this.mxform.endMonth = ''
      this.wdform.startMonth = ''
      this.wdform.endMonth = ''
      this.ywyform.startMonth = ''
      this.ywyform.endMonth = ''
      this.mxform.startTime = ''
      this.mxform.endTime = ''
      this.wdform.startTime = ''
      this.wdform.endTime = ''
      this.ywyform.startTime = ''
      this.ywyform.endTime = ''
    },
    // 明细日期转换
    mxdateChange(value) {
      this.mxform.startTime = value[0]
      this.mxform.endTime = value[1]
    },
    mxmonthChange(value) {
      this.mxform.startMonth = value[0]
      this.mxform.endMonth = value[1]
    },
    // 获取月份
    wdmonthChange(value) {
      this.wdform.startMonth = value[0]
      this.wdform.endMonth = value[1]
    },
    // 网点日期转换
    wddateChange(value) {
      this.wdform.startTime = value[0]
      this.wdform.endTime = value[1]
    },
    // 业务员日期转换
    ywydateChange(value) {
      this.ywyform.startTime = value[0]
      this.ywyform.endTime = value[1]
    },
    ywymonthChange(value) {
      this.ywyform.startMonth = value[0]
      this.ywyform.endMonth = value[1]
    },
    // 明细重置
    mxClear() {
      this.Time = []
      this.month = []
      this.mxform.startMonth = ''
      this.mxform.endMonth = ''
      this.mxform.startTime = ''
      this.mxform.endTime = ''
      this.$refs.mxform.resetFields()
    },
    // 汇总网点重置
    wdClear() {
      this.Time = []
      this.month = []
      this.wdform.startMonth = ''
      this.wdform.endMonth = ''
      this.wdform.startTime = ''
      this.wdform.endTime = ''
      this.$refs.wdform.resetFields()
    },
    // 明细重置
    ywyClear() {
      this.Time = []
      this.month = []
      this.ywyform.startMonth = ''
      this.ywyform.endMonth = ''
      this.ywyform.startTime = ''
      this.ywyform.endTime = ''
      this.$refs.ywyform.resetFields()
    },
    // 明细搜索
    mxSearch() {
      if (this.mxform.startMonth === '' && this.mxform.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.mxloading = true
      collectBillSearch(this.mxform).then((res) => {
        if (res.code === 200) {
          this.mxTableData = res.data.list.data
          this.mxtotal = res.data.list.total
          this.mxth = res.data.fields
        } else {
          this.mxTableData = []
          this.mxtotal = 0
        }
      })
      this.mxloading = false
    },
    // 切换
    handleClick(tab, event) {
      this.show = 1
      this.listName = 'first'
      this.wdform.collectType = 1
      this.mxform.collectType = 1
      this.month = []
      this.Time = []
    },
    handClick(tab, event) {
      // console.log(tab, event)
      this.show = 1
      this.wdform.collectType = 1
      this.ywyform.collectType = 1
      this.month = []
      this.Time = []
    },
    mxhandleSizeChange(val) {
      this.mxform.pageDate.pageSize = val
      this.mxform.pageDate.pageNum = 1
      this.mxSearch()
    },
    mxhandleCurrentChange(val) {
      this.mxform.pageDate.pageNum = val
      this.mxSearch()
    },
    ywyhandleSizeChange(val) {
      this.ywyform.pageDate.pageSize = val
      this.ywyform.pageDate.pageNum = 1
      this.ywySearch()
    },
    ywyhandleCurrentChange(val) {
      this.ywyform.pageDate.pageNum = val
      this.ywySearch()
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    wdhandleSelectionChange(val) {
      // this.multipleSelection = val;
    }

  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
